<?php include('includes/code/common.php'); ?>
<!doctype html>
<html>
  <head>
    <meta http-equiv="X-UA-Compatible" content="IE=9" />
    <title>Samples - Menus</title>
    <meta name="keywords" content="" />
    <meta name="description" content="" />
    <meta name="robots" content="index,follow"/>
    <meta http-equiv="expires" content="0"/>
    <link rel="stylesheet" type="text/css" href="includes/css/yui_3.0.0_reset-min.css" />
    <link id="mainCss" href="includes/css/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/print.css" rel="stylesheet" type="text/css" media="print" />
    <link href="includes/css/template/sample.css" rel="stylesheet" type="text/css" media="screen" />
    <link href="includes/css/template/vargas/jquery.vegas.css" rel="stylesheet" type="text/css" media="screen" />
    <script type="text/javascript" src="includes/javascript/jquery-1.6.1.min.js"></script>
    <script type="text/javascript" src="includes/javascript/template/html5.js"></script>

    <script type="text/javascript">
      $(function(){
        $("#changeMenu").toggle(function (){
          $("#switchable").attr("class","sideMenu");
          $(this).text("Switch to horizontal menu");
        }, function(){
           $("#switchable").attr("class","horizontalMenu");
           $(this).text("Switch to vertical menu");
        });

      });
    </script>

    <style type="text/css">

    </style>

  </head>

  <?php
  //top navigation selected
  $topNavSelected = "samples";
  ?>

  <?php
  //right navigation selected
  $rightNavSelected = "menus";
  ?>

  <body>

    <!-- Container -->
    <div id="container">
      <!-- Header -->
      <div id="header" title="Treadstone Web Services">
        <?php include('includes/headerContent.php') ?>
      </div>

      <div class="clear"></div>

      <!-- Body -->
      <div id="bodyContent">

        <!-- Breadcrumbs -->
        <div id="breadcrumbs">
          <ul>
            <li class="link"><a href="index.php" title="Home">Home</a></li>
            <li class="link"><a href="samples.php" title="Samples">Samples</a></li>
            <li>Menus</li>
          </ul>
        </div>
        <!-- End Breadcrumbs -->

        <div id="content" >

          <div class="sectionLeft">

            <h1>Menus</h1>

            <nav class="sideMenu">
              <h1>Menu Header</h1>
              <ul>
                <li><a href="#" title="Link 1">Link 1</a></li>
                <li><a href="#" title="Link 2">Link 2</a></li>
                <li>
                  <a href="#" title="Link 3" >Link 3</a>
                  <ul>
                    <li ><a href="#" title="Link 3 - Sublink 1">Link 3 - Sublink 1</a></li>
                    <li ><a href="#" title="Link 3 - Sublink 2">Link 3 - Sublink 2</a></li>
                    <li ><a href="#" title="Link 3 - Sublink 3" >Link 3 - Sublink 3</a>
                      <ul>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 1" class="selected">Link 3 - Sublink 3 - Link 1</a></li>
                      </ul>
                    </li>
                  </ul>
                </li>
                <li ><a href="#" title="Link 4">Link 4</a></li>
                <li ><a href="#" title="Link 5">Link 5</a></li>
                <li ><a href="#" title="Link 6">Link 6</a></li>
                <li ><a href="#" title="Link 7">Link 7</a></li>
              </ul>
      			</nav>

            <div class="clear">
            <p>The menu below is interchangeable between a vertical menu (class="sideMenu") and a horizontal menu (class="horizontalMenu").
             The structure of the html that generates the menu is the same. To get the arrows to show up, the appropriate link tag should be surrounded with &lt;span&gt; tags.
             All bump out unordered lists should have the same class="submenu". The same markup can be used to create different menu structures.</p>

            <p><a href="#" id="changeMenu">Switch to vertical menu</a></p>

            </div>
            
             <nav id="switchable" class="horizontalMenu">
               <h1>Menu Header</h1>
               <ul>                 
                <li><a href="#" title="Link 1">Link 1</a></li>
                <li><a href="#" title="Link 2" ><span>Link 2</span></a>
                  <ul class="submenu">
                    <li ><a href="#" title="Link 2 - Sublink 1">Link 2 - Sublink 1</a></li>
                    <li ><a href="#" title="Link 2 - Sublink 2">Link 2 - Sublink 2</a></li>
                    <li ><a href="#" title="Link 2 - Sublink 3">Link 2 - Sublink 3</a></li>
                  </ul>
                </li>
                <li>
                  <a href="#" title="Link 3" ><span>Link 3</span></a>
                  <ul class="submenu">
                    <li ><a href="#" title="Link 3 - Sublink 1">Link 3 - Sublink 1</a></li>
                    <li ><a href="#" title="Link 3 - Sublink 2">Link 3 - Sublink 2</a></li>
                    <li ><a href="#" title="Link 3 - Sublink 3" ><span>Link 3 - Sublink 3</span></a>
                      <ul  class="submenu">
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 2" >Link 3 - Sublink 3 - Link 2</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 3" >Link 3 - Sublink 3 - Link 3</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 4" >Link 3 - Sublink 3 - Link 4</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 5" >Link 3 - Sublink 3 - Link 5</a></li>

                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 2" >Link 3 - Sublink 3 - Link 2</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 3" >Link 3 - Sublink 3 - Link 3</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 4" >Link 3 - Sublink 3 - Link 4</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 5" >Link 3 - Sublink 3 - Link 5</a></li>

                      </ul>
                    </li>
                  </ul>
                </li>
                <li ><a href="#" title="Link 4">Link 4</a></li>
                <li ><a href="#" title="Link 5"><span>Link 5</span></a>
                  <ul class="submenu">
                    <li ><a href="#" title="Link 5 - Sublink 1">Link 5 - Sublink 1</a></li>
                    <li ><a href="#" title="Link 5 - Sublink 2">Link 5 - Sublink 2</a></li>
                    <li ><a href="#" title="Link 5 - Sublink 3" ><span>Link 5 - Sublink 3</span></a>
                      <ul class="submenu">
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 2" >Link 3 - Sublink 3 - Link 2</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 3" >Link 3 - Sublink 3 - Link 3</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 4" >Link 3 - Sublink 3 - Link 4</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 5" >Link 3 - Sublink 3 - Link 5</a></li>

                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 2" >Link 3 - Sublink 3 - Link 2</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 3" >Link 3 - Sublink 3 - Link 3</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 4" >Link 3 - Sublink 3 - Link 4</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 5" >Link 3 - Sublink 3 - Link 5</a></li>

                      </ul>
                    </li>
                  </ul>
                </li>
                <li ><a href="#" title="Link 6">Link 6</a></li>
              </ul>
      			</nav>

            <div class="clear">
            <p>The following illustrates a vertical menu when a particular option is chosen and you want to expand out the selected section to give the user
            an idea of the menu structure of the content that is selected. To get the unordered list section to show up, do not include the class="menu" and remove the &lt;span&gt; tags
            around the parent link that contains the submenu. To indicate which item is selected, the class="selected" attribute should be added to the selected anchor link. There should only be one selected link.</p>
          </div>

            <nav class="sideMenu">
              <h1>Menu Header</h1>
              <ul>
                <li><a href="#" title="Link 1">Link 1</a></li>
                <li><a href="#" title="Link 2" >Link 2</a>
                  <ul>
                    <li ><a href="#" title="Link 2 - Sublink 1">Link 2 - Sublink 1</a></li>
                    <li ><a href="#" title="Link 2 - Sublink 2" class="selected">Link 2 - Sublink 2</a></li>
                    <li ><a href="#" title="Link 2 - Sublink 3">Link 2 - Sublink 3</a></li>
                  </ul>
                </li>
                <li>
                  <a href="#" title="Link 3" ><span>Link 3</span></a>
                  <ul class="submenu">
                    <li ><a href="#" title="Link 3 - Sublink 1">Link 3 - Sublink 1</a></li>
                    <li ><a href="#" title="Link 3 - Sublink 2">Link 3 - Sublink 2</a></li>
                    <li ><a href="#" title="Link 3 - Sublink 3" ><span>Link 3 - Sublink 3</span></a>
                      <ul class="submenu">
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 2" >Link 3 - Sublink 3 - Link 2</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 3" >Link 3 - Sublink 3 - Link 3</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 4" >Link 3 - Sublink 3 - Link 4</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 5" >Link 3 - Sublink 3 - Link 5</a></li>

                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 2" >Link 3 - Sublink 3 - Link 2</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 3" >Link 3 - Sublink 3 - Link 3</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 4" >Link 3 - Sublink 3 - Link 4</a></li>
                        <li ><a href="#" title="Link 3 - Sublink 3 - Link 5" >Link 3 - Sublink 3 - Link 5</a></li>

                      </ul>
                    </li>
                  </ul>
                </li>
                <li ><a href="#" title="Link 4" class="selected">Link 4</a></li>
                <li ><a href="#" title="Link 5">Link 5</a>
                  <ul>
                    <li ><a href="#" title="Link 5 - Sublink 1">Link 5 - Sublink 1</a></li>
                    <li ><a href="#" title="Link 5 - Sublink 2">Link 5 - Sublink 2</a></li>
                    <li ><a href="#" title="Link 5 - Sublink 3" class="selected" >Link 5 - Sublink 3</a>
                      <ul>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 2" >Link 3 - Sublink 3 - Link 2</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 3" >Link 3 - Sublink 3 - Link 3</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 4" >Link 3 - Sublink 3 - Link 4</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 5" >Link 3 - Sublink 3 - Link 5</a></li>

                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 1">Link 3 - Sublink 3 - Link 1</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 2" >Link 3 - Sublink 3 - Link 2</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 3" >Link 3 - Sublink 3 - Link 3</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 4" >Link 3 - Sublink 3 - Link 4</a></li>
                        <li ><a href="#" title="Link 5 - Sublink 3 - Link 5" class="selected" >Link 3 - Sublink 3 - Link 5</a></li>

                      </ul>
                    </li>
                  </ul>
                </li>
                <li ><a href="#" title="Link 6">Link 6</a></li>
                <li ><a href="#" title="Link 7">Link 7</a></li>
              </ul>
      			</nav>



            <!--   end #section-->
          </div>


          <!-- Right Navigation -->
          <div id="sidebar">
            <?php include('includes/rightNavSamples.php') ?>
          </div>
          <!-- end Right Navigation -->

          <!-- end #content -->
        </div>

        </div>
        <!-- end #bodyContent -->
        <!-- End Body -->

        <!-- Footer -->
        <div id="footer">
          <?php include('includes/footer.php') ?>
        </div>
        <!-- End Footer -->
      </div>
    <!-- End Container -->
  </body>
</html>

